<template>
  <div>
    <!-- echart表格 -->
    <div :id="randomId" class="mapcharts" :style="echartStyle"></div>
  </div>
</template>

<script>
	import echarts from 'echarts'
	import 'echarts/map/js/china.js';// 引入中国地图数据
	import 'echarts/theme/shine.js';//图表主题
	// 引入 ECharts 主模块
//	var echarts = require('../../echarts/lib/echarts');
//	require("echarts/lib/chart/map");
//	// 引入提示框和标题组件
//	require('echarts/lib/component/tooltip');
//	require('echarts/lib/component/title');
	
	export default {
		name:'mMapchart',
		props: {
			echartStyle: {  // 样式
				type: Object,
				default () {          
					return  {}        
				} 
			},
			userJson:{
				type: Array,
				default () {          
					return []     
				}
			},
			// 标题文本
			titleText: {        
				type: String,
				default:   ''      
			},
		},
    data() {
      return {
        chart: null,
        randomId:'mychart'+ Date.now() + Math.random()
      };
    },
    mounted() {
      this.chinaConfigure();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      chinaConfigure() {
//      console.log(this.userJson)
        let myChart = echarts.init(document.getElementById(this.randomId),'shine'); //这里是为了获得容器所在位置    
//      window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
//        backgroundColor: "#02AFDB",
					title: {
			        text: this.titleText,
//			        subtext: 'data from PM25.in',
//			        sublink: 'http://www.pm25.in',
			        left: 'center',
//			        textStyle: {
//			            color: '#fff'
//			        }
					},
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['red','orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '默认件数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: this.userJson
            }
          ]
        })
      }
    }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.mapcharts{
    width: 100%;
}
</style>
